<template>
	<view class="">
		<view class="logoBox">
			LOGO
		</view>
		<view class="formBox">
			<view class="formBox-list">
				<view class="formBox-list__item">
					<view class="lable">账户</view>
					<view class="inputBox" :class="{ 'inputBox--active': isFocus == 0, showCloseBtn: account != '' }">
						<input type="text" placeholder="请输入登录的账户" placeholder-class="inputStyle"
						v-model="account"
						@blur="blurInput(0)"
						@focus="focusInput(0)"/>
						<view class="imageBox">
							<view class="imageBox-clear imageBox-clear--active" @click="clearData('account')">
								<image src="@/static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="formBox-list__item">
					<view class="lable">密码</view>
					<view class="inputBox" :class="{ 'inputBox--active': isFocus == 1, showCloseBtn: password != '' }">
						<input placeholder="请输入登录的密码" placeholder-class="inputStyle"
						v-model="password"
						:password="!eyeShowHideArray[1].show"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="imageBox">
							<view class="imageBox-clear imageBox-clear--active" @click="clearData('password')">
								<image src="@/static/public/icon-clear.png" mode="widthFix"></image>
							</view>
							<view class="imageBox-see" @click="toggleEyeStatus(1)">
								<image :src="eyeShowHideArray[1].show ? eyeShow : eyeHide" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="initBtn" @tap.stop="login">登录</view>
			</view>
		</view>
		
		<view class="otherBox">
			<view class="otherBox-headerBox">
				<view class="line"></view>
				<view class="header">其他方式登录</view>
				<view class="line"></view>
			</view>
			<view class="otherBox-list">
				<view class="otherBox-list__item" @tap.stop="qqLogin()">
					<image src="@/static/public/QQ.png" mode=""></image>
					<view class="title">QQ</view>
				</view>
				<view class="otherBox-list__item" @tap.stop="wxChatLogin()">
					<image src="@/static/public/wechat.png" mode=""></image>
					<view class="title">微信</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				account: 'admin',
				password: '123456',
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }],
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			login(){
				uni.showToast({
					title: '登录成功',
					icon: "none",
					mask: true,
					duration: 1000,
					position: 'bottom'
				})
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}, 1000);
			},
			// 微信登录
			wxChatLogin(){
				uni.login({ 
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event){
						const {code} = event
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						console.log(code,event)
						uni.request({
							 url: 'https://www.example.com/loginByWeixin', //仅为示例，并非真实接口地址。
							 data: {
								 code: event.code
							 },
							 success: (res) => {
								 //获得token完成登录
								uni.setStorageSync('token',res.token)
							 }
						 });
	 
					},
					fail: function (err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			// QQ登录
			qqLogin() {
			console.log('点击qq登录');
			let parameters = {
				openid:'',
				access_token:'',
				nickName:'',
				avatarUrl:'',
			}
			uni.login({
				provider: 'qq',
				success: function(loginRes) {
					console.log(loginRes, 'loginRes');
					parameters.openid = loginRes.authResult.openid
					parameters.access_token = loginRes.authResult.access_token
					// 登录成功
					uni.getUserInfo({
						provider: 'qq',
						success: function(info) {
							// 获取用户信息成功, info.authResult保存用户信息
							console.log(info, 'info');
							parameters.nickName = info.userInfo.nickName
							parameters.avatarUrl = info.userInfo.avatarUrl
							// 把后端想要的数据传给他就可以了    
							uni.showToast({
								title: 'QQ授权登录成功'
							})
						}
					})
				},
				fail: function(err) {
					console.log(err, 'qq授权失败');
					// 登录授权失败  
					// err.code是错误码
				}
			});

		},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},	
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			toggleEyeStatus(index) {
				this.eyeShowHideArray[index].show = !this.eyeShowHideArray[index].show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100vh;
		overflow: hidden;
	}
	
	.logoBox{
		background: #eee;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		border-radius: 50%;
		margin: 200rpx auto 0;
	}
	.formBox{
		&-list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			margin: 150rpx 50rpx 0;
			&__flex{
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
			}
			&__item{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				margin-bottom: 50rpx;
				.lable{
					font-size: 30rpx;
					font-weight: bold;
				}
				.inputBox{
					width: 95%;
					background: #eee;
					border-radius: 12rpx;
					margin: 15rpx 0 0;
					padding: 24rpx 20rpx;
					position: relative;
					&.showCloseBtn{
						.imageBox-clear--active{
							display: block;
						}
					}
					.inputStyle{
						font-size: 26rpx;
						color: #999;
					}
					input{
						width: 85%;
						font-size: 32rpx;
						color: #000;
					}
					.imageBox{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						position: absolute;
						top: 0;bottom: 0;
						right: 20rpx;
						&-clear{
							display: none;
							width: 30rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						&-see{
							width: 45rpx;
							height: 45rpx;
							margin-left: 10rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.initBtn{
				background: #d81e06;
				width: 100%;
				padding: 20rpx 0;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 20rpx;
				color: #fff;
				margin: 50rpx 0 0;
			}
		}
	}
	
	.otherBox{
		position: fixed;
		bottom: 80rpx;
		left: 0;right: 0;
		&-headerBox{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.line{
				width: 80rpx;
				height: 4rpx;
				background: #E9E9E9;
			}
			.header{
				color: #999;
				font-size: 26rpx;
				text-align: center;
				margin: 0 30rpx;
			}
		}
		&-list{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0 0;
			&__item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 20%;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				.title{
					color: #999;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	
</style>